<page-header>
  <ng-template #phActionTpl>
    <nz-button-group>
      <button (click)="add()"
              nz-button
              nzType="primary"><i nz-icon
                                  type="plus"></i> 新增
      </button>
      <button nz-button
              (click)="st.export(null,{sheetname:'角色',filename:'角色.xlsx'})">
        <i nz-icon
           nzType="download"></i> 导出
      </button>
    </nz-button-group>
    <nz-dropdown *ngIf="selected?.length > 0"
                 class="mx-sm">
      <button nz-button
              nz-dropdown>批量操作<i nz-icon
                                 nzType="ellipsis"></i></button>
      <ul nz-menu>
        <li nz-menu-item
            (click)="deleteMany()"><i nz-icon
                                      nzType="delete"></i>删除
        </li>
      </ul>
    </nz-dropdown>
  </ng-template>
</page-header>
<nz-card [nzTitle]="phActionTpl">
  <sf #sf
      mode="search"
      [schema]="searchSchema"
      (formSubmit)="st.reset($event)"
      [loading]="service.http.loading"
      (formReset)="st.reset($event)"></sf>
  <div class="my-md">
    <nz-alert [nzType]="'info'"
              [nzShowIcon]="true"
              [nzMessage]="message">
      <ng-template #message>已选择 <strong class="text-primary">{{ selected?.length }}项</strong>
        <a *ngIf="selected?.length > 0"
           (click)="st.clearCheck()"
           class="ml-lg">清空</a>
      </ng-template>
    </nz-alert>
  </div>
  <st #st
      [bordered]="true"
      [data]="url"
      [loading]="service.http.loading"
      (change)="change($event)"
      [page]="page"
      [columns]="columns"></st>
</nz-card>
